<script setup lang="ts">
import {ref,reactive} from "vue";
import {ElMessage, ElMessageBox, type UploadProps} from "element-plus";
import request from "@/utils/request.ts";
// 获取当前信息
const formRef = ref()
const data = reactive({
  rules: {
    name: [
      {required: true, message: '请输入物品名称', trigger: 'blur'},
    ],
    location: [
      {required: true, message: '请选择存放位置', trigger: 'blur'},
    ],
    classification: [
      { required: true, message: '请输入物品分类', trigger: 'blur' },
      { max: 50, message: '分类名称不能超过50个字符', trigger: 'blur' }
    ],
    image: [
      { required: false, message: '请上传物品图片', trigger: 'blur' },
    ],
    number: [
      { required: true, message: '请输入物品数量', trigger: 'blur' },
      { pattern: /^\d+$/, message: '数量必须为数字', trigger: 'blur' },
    ],
    starttime: [
      { required: true, message: '请选择开始时间', trigger: 'blur' },
    ],
    endtime: [
      { required: true, message: '请选择结束时间', trigger: 'blur' },
    ],
    degree: [
      { required: true, message: '请输入重要程度', trigger: 'blur' },
      { pattern: /^[1-3]$/,max:1, message: '程度分3级，请输入数字级别', trigger: 'blur' },
    ],
  },
  form: {
    classification: '',
    location: '',
    image: '',
    name: '',
    number: '',
    starttime: '',
    endtime: '',
    degree: '',
    goodid: '',
    userid: '',
  },
  options: [
    {
      value: '0',
      label: '卧室',
    },
    {
      value: '1',
      label: '书房',
    },
    {
      value: '2',
      label: '厨房',
    },
    {
      value: '3',
      label: '客厅',
    },
    {
      value: '4',
      label: '餐厅',
    },
    {
      value: '5',
      label: '卫生间',
    },
    {
      value: '6',
      label: '浴室',
    },
    {
      value: '7',
      label: '阳台',
    },
    {
      value: '8',
      label: '储物间',
    },
    {
      value: '9',
      label: '衣帽间',
    },

  ],
  user: JSON.parse(localStorage.getItem("code_user") || "{}"),
})
function add() {
  formRef.value.validate( (valid:boolean) => {//需要验证
    if(valid) {
      if(!(data.form.starttime <= data.form.endtime)){
        ElMessage.error("结束时间必须晚于开始时间")
      }else{
        data.form.userid = data.user.userid
        //保存操作
        request.post("/insertGoods", data.form).then(res => {
          console.log(res)
          if (res.status == 200) {
            ElMessage.success("保存成功")
            formRef.value.resetFields();//清空表单并重置
          }else {
            ElMessage.error(res.msg);
          }
        })
      }
    }
  })
}
//更头像上传钩子函数
//图片发送成功后回调
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  //imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  console.log(response)
  data.form.image = response.data;//获取服务器返回的图片可访问路径
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (!(rawFile.type === 'image/jpeg' || rawFile.type === 'image/png')) {
    ElMessage.error('Avatar picture must be JPG Or PNG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>

<template>
  <div class="card">
    <el-form ref="formRef" :model="data.form" :rules="data.rules" label-width="100px" style="display:block;margin:20px auto;width: 80%;">
      <el-form-item label="物品图片：">
        <el-upload
            style="height: 100px;width: 100px"
            class="image-uploader"
            action="http://localhost:8080/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="data.form.image" :src="`http://localhost:8080${data.form.image}`" class="image"  alt=""/>
          <el-icon v-else class="image-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item prop="name" label="名称：">
        <el-input v-model="data.form.name" autocomplete="off" placeholder="请输入物品名称"/>
      </el-form-item>
      <el-form-item prop="number" label="数量：">
        <el-input v-model="data.form.number" autocomplete="off" placeholder="请输入物品数量"/>
      </el-form-item>
      <el-form-item prop="classification" label="分类：">
        <el-input v-model="data.form.classification" autocomplete="off" placeholder="请输入物品分类"/>
      </el-form-item>
      <el-form-item prop="location" label="位置：">
        <el-select style="width: 100%" v-model="data.form.location" placeholder="请选择位置选项">
          <el-option
              v-for="item in data.options"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="starttime" label="开始时间：" >
        <el-date-picker
            type="date"
            v-model="data.form.starttime"
            autocomplete="off"
            placeholder="请选择开始时间"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item prop="endtime" label="结束时间：">
        <el-date-picker
            type="date"
            v-model="data.form.endtime"
            autocomplete="off"
            placeholder="请选择结束时间"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item prop="degree" label="程度：" >
        <el-input v-model="data.form.degree" autocomplete="off" placeholder="请输入重要程度"/>
      </el-form-item>
      <el-button @click="add" style="display:block;width: 200px;height: 50px;margin: 0 auto">保 存</el-button>
    </el-form>
  </div>
</template>

<style scoped>
.card{
  width: 80%;
  height: 90%;
  background: rgba(255, 255, 255, 0.9);
  font-weight: bold;
}
.image-uploader .image{
  width: 100px;
  height: 100px;
  display: block;
}
.image-uploader-icon{
  width: 100px;
  height: 100px;
  background: rgba(92, 81, 81, 0.33);
}
.el-button{
  background: rgba(197, 201, 198, 0.95);
  border: 0 none;
  font-weight: bold;
  color: #7c0202;
  font-size: 15px;
}
</style>